<template>
	<div class="bar-chart">
		<div id="main"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		name: "BarChart",
		mounted() {
			// 基于准备好的dom，初始化echarts实例,还可以用refs
			var myChart = echarts.init(document.getElementById("main"));
			// 绘制图表
			myChart.setOption({
				title: {
    text: '柱状图'
  },
  tooltip: {},
  xAxis: {
    /* 是否显示整个x轴线 */
    show:true,
    axisLine:{
      /* 是否显示x轴的水平线,false不展示 */
      show:true,
      /* 整个x轴的颜色 */
      lineStyle:{
        color:{
          type:"linear",
          x:0,
          y:0,
          x2:1,
          y2:0,
          colorStops: [
            {
              offset:0,
              color:"red"
            },
            {
              offset:1,
              color:"blue"
            }
          ],
          global:false,
        },
       width:5,
        
      },
      /* 刻度线的设置 */
      axisTick:{
        show:true,
        /* 刻度线是否在柱子的中间位置显示 */
        alignWithLabel:true,
        /* true刻度线显示在柱子的上面 */
        inside:false,
        /* 控制刻度线的长度 */
        length:10,
        /* 设置刻度线的颜色样式 */
        lineStyle:{
          color:'yellow',
          shandowBlur:2.5,
        }
      }
    },
    /* x轴文字的样式 */
      axisLabel:{
        color:"blue",
          /* 显示所有x轴的数据 */
          interval:0,
          /* 放不下的倾斜角度 */
          rotate:0,
          /* 数据之间的距离 */
          margin:15
      },
      /* x轴的网格线 */
      splitLine:{
        /* 是否显示网格线 */
        show:true,
        lineStyle:{
          color:"blue"
        }
      },
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    splitLine:{
        /* 是否显示网格线 */
        show:true,
        lineStyle:{
          color:"blue"
        }
      },
      axisLine:{
         show:false,
      }
  },
 series: [
        {
          name: "销量",
          type: "bar",
          /* data: [5, 20, 36, 10, 10, 20] */
          radius:'55%',
          data: [
            {
              value: 5,
              name: "衬衫",
              /* 这是单独设置给某一个设置颜色 */
              itemStyle:{
                  color:'red'
              }
            },
            {
              value: 20,
              name: "羊毛衫",
            },
            {
              value: 36,
              name: "雪纺衫",
            },
            {
              value: 10,
              name: "裤子",
            },
            {
              value: 10,
              name: "高跟鞋",
            },
            {
              value: 20,
              name: "袜子",
            },
          ],
        },
  ]
			});
			window.BarChart = myChart;
			//     window.onresize=function(){
			//         myChart.resize()
			//     }
		},
	};
</script>

<style scoped lang="scss">
	#main {
		height: 300px;
	}
</style>